<template>
    <div>
      <a-form @submit.prevent="handleSubmit">
        <div>
          <label for="name">Name:</label>
          <a-input
            id="name"
            v-model="localUser.name"
            :disabled="mode === 'view'"
          />
        </div>
        <div>
          <label for="email">Email:</label>
          <a-input
            id="email"
            v-model="localUser.email"
            :disabled="mode === 'view'"
          />
        </div>
        <div v-if="mode !== 'view'">
          <a-button type="primary" html-type="submit">{{ mode === 'add' ? 'Add' : 'Update' }}</a-button>
        </div>
      </a-form>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, PropType, ref, watch } from 'vue';
  
  export default defineComponent({
    name: 'UserForm',
    props: {
      user: {
        type: Object as PropType<{ name: string; email: string }>,
        required: true,
      },
      mode: {
        type: String as PropType<'view' | 'edit' | 'add'>,
        required: true,
      },
    },
    emits: ['submit'],
    setup(props, { emit }) {
      const localUser = ref({ ...props.user });
  
      watch(
        () => props.user,
        (newUser) => {
          localUser.value = { ...newUser };
        },
        { deep: true }
      );
  
      const handleSubmit = () => {
        console.log('eeeeeeeeeeeeeeeeee');
        emit('submit', localUser.value);
      };
  
      return {
        localUser,
        handleSubmit,
      };
    },
  });
  </script>